<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    h2 {
      text-align: center;
    }

    p {
      text-align: center;
    }

    button {
      display: inline-block;
    }

    .root {
      width: 300px;
      height: 300px;
      border: 3px solid black;
      /* 对于固定宽度的元素，可采用margin来居中。注意是固定宽度，不能采用百分比或者自适应 */
      margin: 0 auto;
    }

    .root>h2 {
      /* 文字在盒子内垂直居中，把line-height属性设置成父级元素的高度即可。注意去除边距 */
      line-height: 300px;
      margin: 0;
      padding: 0;
    }

    .box {
      position: absolute;
      border: 1px solid #000;
      /* 盒子的左边 距离窗口左边有窗口的宽度的一般远 */
      left: 50%;
      /* 移动自身width的一半 */
      transform: translateX(-50%);
    }

    .flex {
      /* 绝对定位会破坏布局，因为绝对定位的元素脱离了“文档流”。
      可以去掉上边距看看效果，会发现重叠了。都是绝对定位惹的祸 */
      margin-top: 300px;
      border: 1px solid #000;
      /* 父元素用的属性 */
      display: flex;
      /* 让子元素水平居中 */
      justify-content: center;
      /* 让子元素垂直居中。这里效果可能不是很明显，给父元素加上一个足够高的高度即可 */
      align-items: center;
      /* 这样，子元素就在父元素中水平和垂直居中了 */
      height: 400px;
      /* flex对比绝对定位的优势在于，不会破坏布局。使用起来也更加灵活、方便 */
    }

    .flex>div {
      margin: 5px;
      border: 1px solid #000;
    }
  </style>
</head>

<body>
  <h2>文字居中</h2>
  <p><button>行内元素居中</button></p>
  <h2>对于display属性为inline和inline-block的元素 都可以采用text-align: center;的方式居中</h2>
  <h2>对于块级元素，及display属性为block的元素：</h2>
  <div class="root">
    <h2>1.给定宽度，使用margin</h2>
  </div>
  <div class="box">
    <p>自适应宽高，可使用绝对定位或者flex</p>
    <p>自适应是因为width和height属性的默认值是auto，即自动</p>
    <p>这里使用绝对定位</p>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </div>
  <div class="flex">
    <div>
      <p>这里使用flex</p>
      <p>由于在flex中，有的属性是父元素用的，有的属性是子元素用的
      </p>
      <p>因此这里需要一个外层盒子，用作父元素。内层盒子用作子元素</p>
    </div>
  </div>
</body>

</html>